<template>
  <div>
    <div class="nav">
      <van-nav-bar
      title="会员登录"
      @click-left="$router.go(-1)"
      left-arrow
      />
    </div>
    <div class="main">
      <div class="top">
        <h2>手机号登录</h2>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <br><br>
      <div class="mid">
        <div>
          <input type="text" placeholder="请输入手机号码" v-model="userPhone">
        </div>
        <div>
          <input type="text" placeholder="请输入图形验证码" v-model="userKey">
          <img :src="picBase" v-show="picBase" @click="getPics">
        </div>
        <div>
          <input type="text" placeholder="请输入短信验证码" v-model="smsCode">
          <a href="javascript:" @click="getCode">
            {{ nowSeconds === totalSeconds ? '发送验证码' : `${nowSeconds}秒后重新发送` }}
          </a>
        </div>
      </div>
      <br><br>
      <div class="bottom">
        <button @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getPic, getCode, login } from '@/api/login.js'
export default {
  name: 'LoginIndex',
  data () {
    return {
      userPhone: '', // 用户手机号
      userKey: '', // 用户输入的图形验证码
      smsCode: '', // 用户输入的短信验证码
      picBase: '', // 图片验证码信息
      picKey: '', // 图片唯一标识
      nowSeconds: 60, // 验证等待
      totalSeconds: 60, // 验证等待总时长
      timer: null // 定时器id
    }
  },
  async created () {
    this.getPics()
    // this.$toast('图片请求成功')
  },
  methods: {
    // 获取图形验证码
    async getPics () {
      const { data: { base64, key } } = await getPic()
      this.picBase = base64
      this.picKey = key
      this.$toast.success('图片请求成功')
    },
    // 校验手机号与图形验证码
    checkFn () {
      if (!/^1[0-9]{10}$/.test(+this.userPhone)) {
        this.$toast('请输入正确的手机号')
        return false
      }
      if (!/^[0-9a-zA-Z]{4}$/.test(this.userKey)) {
        this.$toast('请输入正确的验证码')
        return false
      }
      return true
    },
    // 获取短信验证码
    async getCode () {
      if (!this.checkFn()) return
      if (this.nowSeconds !== this.totalSeconds) return
      console.log('进去了')
      const result = await getCode(this.userKey, this.picKey, this.userPhone)
      console.log(result)
      if (this.timer) return
      this.timer = setInterval(() => {
        this.nowSeconds--
        if (this.nowSeconds <= 0) {
          this.nowSeconds = this.totalSeconds
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
    },
    // 登录请求
    async login () {
      if (!this.checkFn()) return
      if (!this.smsCode) {
        this.$toast('请输入短信验证码')
        return
      }
      const result = await login(this.userPhone, this.smsCode)
      console.log(result)
      this.$toast('登录成功')
      // 将用户信息存入vuex
      this.$store.commit('userInfo/getUserMessage', result.data)
      // 路由跳转至首页
      const query = this.$route.query
      // 如果路由携带了参数,则回退到先前页面
      if (query) {
        this.$router.replace(query.backUrl)
        return
      }
      // 如果没有，导航至首页
      this.$router.push('/')
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
input {
  border:none;
}
.top p {
  opacity:0.5;
}
.main {
  padding:20px;
}
.mid>div {
  width:100%;
  padding:15px 5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid gray;
}
img {
  width:100px;
  height:30px;
}
.bottom button{
  width:100%;
  height:50px;
  /* background:orange; */
  background:linear-gradient(transparent,orange,pink);
  border-radius:50px;
  color:white;
}
</style>
